{% extends "base.html" %}
{% load static %}
{% load event_tags %}
{% load i18n %}
{% block content %}
    {{ block.super }}
    <h3>
        {% if scope == 'system' %}
            {% trans "System" %}
        {% elif scope == 'personal' %}
            {% trans "Personal" %}
        {% else %}
            {% trans "System" %}
        {% endif %}
        {% trans "Notification Settings" %}
    </h3>
    <form class="form-inline col-sm-10" method="post" id="notform">
        {% csrf_token %}
        <div class="container" style="width:50%">
            {% if request.user.is_superuser %}
                <div class="col-sm-5">
                    <label for="notification-scope">
                        {% trans "Scope" %} <span class="fa-solid fa-circle-question has-popover" data-trigger="hover" data-content="{% trans "Destinations for system notifications are configured in System Settings. Destinations for personal notifications are taken from your personal contact details (personal Slack notifications will be sent to you as a direct message)." %}"/>
                    </label>
                    <select data-placeholder="Scope"
                            id="notification-scope"
                            class="chosen-select form-control"/>
                        <option value="system">
                            {% trans "System" %}
                        </option>
                        <option value="personal">
                            {% trans "Personal" %}
                        </option>
                        <option value="template">
                            {% trans "Template" %}
                        </option>
                    </select>
                </div>
                <p>
                    &nbsp;
                </p>
                <p>
                    &nbsp;
                </p>
                <p>
                    &nbsp;
                </p>
            {% endif %}
            {% if scope == 'system' %}
                <p class="amber-color-with-padding">
                    {% trans "These notification settings apply <u>globally</u> to all products and will be sent to all superusers." %}
                </p>
            {% elif scope == 'personal' %}
                <p class="amber-color-with-padding">
                    {% trans "These notification settings apply <u>globally</u> to all products that you have read access to and will be sent to you only." %}
                </p>
                <p>
                    {% trans "If you want only notifications for certain products you should disable everything here and enable notifications on those products." %}
                </p>
            {% else %}
                <p class="amber-color-with-padding">
                    {% trans "These template <u>template</u>" %}
                </p>
            {% endif %}

            {% for u in not_users %}
                <p>
                    {{ u.username }} {{ u.applicable_notifications_count }}
                </p>
                {% for n in u.applicable_notifications %}
                    <p>
                        {{ n.id }} {{ n.product.id }}, {{ n.user }}, e:{{ n.engagement_added }}, t:{{ n.test_added }}, scan:{{ n.scan_added }}
                    </p>
                {% endfor %}
                <p>
                    {{ u.merged_notifications.scan_added }}
                </p>
            {% endfor %}
            <table class="table table-hover col-sm-5">
                <thead>
                    <tr>
                        <th>{% trans "Event" %}</th>
                        {% if 'slack' in enabled_notifications %}
                            <th class="centered">{% trans "Slack" %}</th>
                        {% endif %}
                        {% if scope == 'system' and 'msteams' in enabled_notifications %}
                            <th class="centered">{% trans "Microsoft Teams" %}</th>
                        {% endif %}
                        {% if 'mail' in enabled_notifications %}
                            <th class="centered">{% trans "Mail" %}</th>
                        {% endif %}
                        {% if 'webhooks' in enabled_notifications %}
                        <th class="centered">{% trans "Webhooks" %}</th>
                        {% endif %}
                        <th class="centered">{% trans "Alert" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for field in form.visible_fields %}
                        <tr>
                            {% if field.auto_id %}
                                <td>
                                    {{ field.label }}
                                    {% if field.field.required %}<sup>*</sup>{% endif %}
                                    {% if field.help_text %}
                                        <i class="fa-solid fa-circle-question has-popover"
                                        data-trigger="hover"
                                        data-content="{{ field.help_text }}"
                                        data-placement="right"
                                        data-container="body">
                                        </i>
                                    {% endif %}
                                </td>
                            {% endif %}
                            {% for pk,c in field.field.widget.choices %}
                                {% if scope == 'system' and c in enabled_notifications %}
                                    <td class="centered">
                                        <input type="checkbox"
                                            name="{{ field.name }}"
                                            aria-label="{{ field.name }}"
                                            {% if c in field.value %}checked{% endif %}
                                            value="{{ c }}"/>
                                    </td>
                                {% elif  scope == 'personal' and c in enabled_notifications and c != 'msteams' %}
                                    <td class="centered">
                                        <input type="checkbox"
                                            name="{{ field.name }}"
                                            aria-label="{{ field.name }}"
                                            {% if c in field.value %}checked{% endif %}
                                            value="{{ c }}"/>
                                    </td>
                                {% elif  scope == 'template' and c in enabled_notifications and c != 'msteams' %}
                                    <td class="centered">
                                        <input type="checkbox"
                                            name="{{ field.name }}"
                                            aria-label="{{ field.name }}"
                                            {% if c in field.value %}checked{% endif %}
                                            value="{{ c }}"/>
                                    </td>
                                {% endif %}
                            {% endfor %}
                        </tr>
                        {% for error in field.errors %}<span class="help-block {{ form.error_css_class }}">{{ error }}</span>{% endfor %}
                    {% endfor %}
                    {% block additional_forms %}
                    {% endblock additional_forms %}
                </tbody>
            </table>
            <div class="col-sm-offset-10">
                <input class="btn btn-primary"
                    type="submit"
                    name="edit_notifications"
                    value="{% trans "Submit" %}"/>
            </div>
        </div>
    </form>
{% endblock content%}
{% block postscript %}
    {{ block.super }}
    <script>
        $(function () {
            $(".chosen-select").chosen({disable_search_threshold: 10});
            $('#notification-scope').val('{{ scope }}');
            $('.chosen-select').trigger('chosen:updated');
            $('#notification-scope').change(function() { window.location = '{% url 'notifications' %}/' + $(this).val(); });
        });
    </script>
{% endblock postscript %}
